import React,{useState} from "react";
import { EnvironmentOutline } from 'antd-mobile-icons'
import '../Gou.js'
const Chat = () => {
  // 辅助函数：将px转换为rem（1rem = 16px）
  const rem = (px) => `${px / 16}rem`;

  const [isshow,setIsshow] = useState(false) 
  return (
    <div style={{
      backgroundColor: "#f5f5f5",
      minHeight: "100vh",
      margin: 0,
      padding: 0,
      fontFamily: "PingFang SC,Helvetica Neue,Helvetica,Arial,sans-serif"
    }}>
      {/* 顶部导航栏 */}
      <div style={{
        backgroundColor: "#d9251c",
        color: "#fff",
        padding: `${rem(12)} ${rem(16)}`,
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        height: "15rem"
      }}>
        <div style={{ display: "flex", alignItems: "center" }}>
          <span style={{
            fontSize: "8rem",
            cursor: "pointer",
            marginRight: "40rem",

          }}>&lt;</span>
          <h1 style={{
            fontSize: "5rem",
            fontWeight: "600",
            margin: 0
          }}>消息页面</h1>
        </div>
        <span style={{
          fontSize: rem(20),
          cursor: "pointer"
        }}>...</span>
      </div>
      <div style={isshow==true ? {width:"100%",height:"15rem",backgroundColor:"red",color:"white",display:"block"} : {display:"none"}} >
        <span>已发货</span>
      </div>
      {/* 收货人信息模块 */}
      <div style={{
        backgroundColor: "#fff",
        margin: `0 ${rem(10)} ${rem(10)}`,
        borderRadius: rem(6),
        padding: rem(12),
        height: "10rem",
        marginBottom: "3rem"
      }}>
        <div style={{ display: "flex", alignItems: "center" }}>
          <div style={{
            width: "8rem",
            height: "8rem",
            borderRadius: "50%",
            backgroundColor: "#d9251c",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            marginRight: rem(8)
          }}>
            <span style={{ color: "#fff", fontSize: "5rem" }}><EnvironmentOutline /></span>
          </div>
          <div>
            <p style={{
              fontSize: "3.5rem",
              color: "#333",
              margin: `0 0 ${rem(4)}`
            }}>收货人：张三  138****9121</p>
            <p style={{
              fontSize: "3.5rem",
              color: "#999",
              margin: 0
            }}>北京市朝阳区望京方恒国际中心C座</p>
          </div>
        </div>
      </div>

      {/* 商品信息模块 */}
      <div style={{
        backgroundColor: "#fff",
        margin: `0 ${rem(10)} ${rem(10)}`,
        borderRadius: rem(6),
        padding: rem(12),
      }}>
        <div style={{
          display: "flex",
          marginBottom: rem(12)
        }}>
          <img
            src="https://ps.ssl.qhimg.com/sdmt/394_266_100/t016285e89909a8c421.webp"
            alt="product"
            style={{
              width: "20rem",
              borderRadius: rem(4),
              marginRight: rem(12)
            }}
          />
          <div style={{ flex: 1 }}>
            <p style={{
              fontSize: "4rem",
              color: "#333",
              margin: `0 0 ${rem(4)}`,
              lineHeight: 1.4
            }}>德国巴斯夫快乐跑燃油宝汽油添加剂积碳清洗剂节油奔驰宝马保时捷</p>
            <p style={{
              fontSize: "4rem",
              color: "#666",
              margin: `0 0 ${rem(4)}`
            }}>每瓶50ml x5瓶</p>
            <div style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center"
            }}>
              <span style={{
                fontSize: "4rem",
                color: "#f00"
              }}>¥58</span>
              <span style={{
                fontSize: rem(12),
                color: "#999"
              }}>x 2</span>
            </div>
          </div>
        </div>
      </div>

      {/* 订单详情列表模块 */}
      <div style={{
        backgroundColor: "#fff",
        margin: `0 ${rem(10)} ${rem(10)}`,
        borderRadius: rem(6),
        padding: rem(12),
        height: "15rem"
      }}>
        <p style={{
          fontSize: "3rem",
          color: "#333",
          margin: `0 0 ${rem(6)}`
        }}>订单编号：57625133057</p>
        <p style={{
          fontSize: "3rem",
          color: "#333",
          margin: `0 0 ${rem(6)}`,
          marginBottom: "3rem"
        }}>下单时间：2019-03-21 16:38:21</p>
      </div>

      {/* 金额统计模块 */}
      <div style={{
        backgroundColor: "#fff",
        margin: `0 ${rem(10)} ${rem(10)}`,
        borderRadius: rem(6),
        padding: rem(12),
      }}>
        <div style={{
          display: "flex",
          justifyContent: "space-between",
          marginBottom: rem(6)
        }}>
          <span style={{
            fontSize: "3rem",
            color: "#333"
          }}>商品总额：</span>
          <span style={{
            fontSize: "3rem",
            color: "#333"
          }}>¥116</span>
        </div>
        <div style={{
          display: "flex",
          justifyContent: "space-between",
          marginBottom: rem(6)
        }}>
          <span style={{
            fontSize: "3rem",
            color: "#333"
          }}>运费：</span>
          <span style={{
            fontSize: "3rem",
            color: "#333"
          }}>¥10</span>
        </div>
        <div style={{
          display: "flex",
          justifyContent: "flex-end",
          marginBottom: 0
        }}>
          <span style={{
            fontSize: "3rem",
            color: "#333"
          }}>需支付：</span>
          <span style={{
            fontSize: "3rem",
            color: "#f00",
            fontWeight: "bold"
          }}>¥126</span>
        </div>
      </div>
    </div>
  );
};

export default Chat;